import React, { useEffect, useState } from 'react';
import moment from 'dayjs'
import { View, Button, Input } from '@tarojs/components'
import dayjs from 'dayjs'
import './index.scss'

const DatePickerWeek = (props) => {
    const { onChange, list = [] } = props
    const [selectedDate, setSelectedDate] = useState(dayjs().format('YYYY-MM-DD'));
    useEffect(() => {
        onChange(dayjs(selectedDate).format('YYYY-MM-DD'))
    }, [selectedDate])
    // 生成本周日期数组（周日到周六）
    const getWeekDates = () => {
        const dates = [];
        const today = new Date();
        const day = today.getDay(); // 当前星期几（0-周日，6-周六）

        // 计算本周周日
        const sunday = new Date(today);
        sunday.setDate(today.getDate() - day);

        // 生成7天的日期
        for (let i = 0; i < 7; i++) {
            const date = new Date(sunday);
            date.setDate(sunday.getDate() + i);
            dates.push(date);
        }

        return dates;
    };

    // 格式化星期显示
    const formatWeekday = (date) => {
        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
        return weekdays[date.getDay()];
    };
    // 处理日期选择
    const handleDateSelect = (date) => {

        setSelectedDate(moment(date).format('YYYY-MM-DD'));
    };
    const isToday = (date) => {
        const inputDate = moment(date).startOf('day'); // 去掉时分秒
        const today = moment().startOf('day');         // 当前日期的0点
        return inputDate.isSame(today);
    };
    const filterRender = (date) => {
        const data = list.reduce((item, val) => {
            const { scheduleDate, orderStatus } = val
            if (dayjs(date).format('YYYY-MM-DD') === scheduleDate && orderStatus === '0') {
                return {
                    ...val,
                    orderUserAmount: item.orderUserAmount + val.orderUserAmount,
                    maxStudentAmount: item.maxStudentAmount + val.maxStudentAmount
                }
            }
            return item
        }, { maxStudentAmount: 0, orderUserAmount: 0 })
        const { maxStudentAmount, orderUserAmount } = data

        if (orderUserAmount < maxStudentAmount) {
            return <View className='DatePickerWeek_Date_itemstatus1'>
                可约
            </View>
        } else if (orderUserAmount === maxStudentAmount && maxStudentAmount > 0) {
            return <View className='DatePickerWeek_Date_itemstatus2'>
                已约满
            </View>
        } else if (maxStudentAmount === 0 || !maxStudentAmount) {
            return <View className='DatePickerWeek_Date_itemstatus2'>
                不可约
            </View>
        }
    }
    return (
        <View
            className='DatePickerWeek_box'
        >
            <View className='DatePickerWeek_week_box'>
                {getWeekDates().map((item, index) => {
                    return <View className='DatePickerWeek_week'>
                        {formatWeekday(item)}
                    </View>
                })}
            </View>
            <View className='DatePickerWeek_Date'>
                {getWeekDates().map((date, index) => {
                    const isSelected = selectedDate === moment(date).format('YYYY-MM-DD')
                    const showView = isToday(date) ? '今' : date.getDate()
                    if (moment(date).isAfter() || isToday(date)) {
                        if (isSelected) {
                            return <View onClick={() => { handleDateSelect(date) }} key={index} className='DatePickerWeek_Date_item'>
                                <View className='DatePickerWeek_Date_itemCount DatePickerWeek_Date_itemCountStyle2'>
                                    {showView}
                                </View>
                                {filterRender(date)}
                            </View>
                        }
                        return <View onClick={() => { handleDateSelect(date) }} key={index} className='DatePickerWeek_Date_item'>
                            <View className='DatePickerWeek_Date_itemCount DatePickerWeek_Date_itemCountStyle3'>
                                {showView}
                            </View>
                            {filterRender(date)}
                        </View>
                    }
                    return <View key={index} className=''>
                        <View className='DatePickerWeek_Date_itemCount DatePickerWeek_Date_itemCountStyle1'>{showView}</View>
                    </View>

                })}
            </View>
        </View>
    );
};

export default DatePickerWeek;